<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="../../styles/index.css">
	<style>
		h4,
		p {
			margin: 0;
		}

		.box {
			width: 300px;
			height: 300px;
			background-color: skyblue;
		}

		.box>div:nth-child(3n-1),
		.box>div:nth-child(3n) {
			border-left: none;

		}

		.box1,
		.box2,
		.box3,
		.box4,
		.box5,
		.box6,
		.box7 {
			width: 100px;
			height: 100px;
			border: solid 1px #000;
			box-sizing: border-box;
			float: left;
		}
	</style>
</head>

<body>
	<div class="container flex">
		<div class="box">
			<div class="box1">box1</div>
			<div class="box2">box2</div>
			<div class="box3">box3</div>
			<div class="box4">box4</div>
			<div class="box5">box5</div>
			<div class="box6">box6</div>
			<div class="box7">box7</div>
		</div>
	</div>
</body>

</html>